<template>
  <view class="remark-box container">
    <ve-card :title="title" v-for="item in remarkList" :key="item.id">
      <view class="card-body"> {{ item.operateLog }} </view>

      <template #footer>
        <view class="card-footer"> {{ item.createUserName }} {{ item.createTime }} </view>
      </template>
    </ve-card>

    <ve-empty v-if="remarkList.length == 0" text="暂无数据" />
  </view>
</template>

<script setup lang="ts">
  import { getRemarkList } from '@/api/order/sOrder'

  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'

  const remarkList = ref<any[]>([])
  const title = ref('订单备注')

  // 获取备注列表
  const getRemarkListApi = ({ orderId, id }: { orderId: string; id: string }) => {
    getRemarkList({ orderId, id }).then((res: any) => {
      const { result } = res
      remarkList.value = result
    })
  }

  onLoad((options: any) => {
    getRemarkListApi(options)
    if (options.title) {
      title.value = options.title
    }
  })
</script>

<style lang="less" scoped>
  .remark-box {
    padding: 24rpx 24rpx;

    .card-body {
      padding: 24rpx 0;
      word-wrap: break-word;
    }

    .card-footer {
      display: flex;
      align-items: center;
      height: 100%;
      font-size: 15px;
      color: #8491a8;
    }
  }
</style>
